<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header :user="userInfo" />
      <div class="main-center " style="height: auto; margin-bottom:  0px;">
        <div class="train-con">
          <div class="banner">
            <el-carousel indicator-position="outside">
              <el-carousel-item v-for="(item, index) in banner" :key="index">
                <!-- <h3>{{ item }}</h3> -->
                <img :src="item.image" @click="goOpen(item.url)" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="train-gg">
            <div class="t-tit" @click="openStudy()">
              <h3>学习进度</h3>
              <span class=" arrow-rr" style="cursor: pointer;">更多</span>
            </div>
            <ul class="gglist" v-if="speed_lesson.length > 0">
              <li v-for="(item, index) in speed_lesson" :key="index" @click="goDetail(item.cid,item)">
                <h3>{{ item.name }}</h3>
                <p>
                  {{ item.validity }}
                  <span v-if="item.validity_status == 1">到期</span>
                  <label class="fr">学到{{ item.section }}/{{ item.contentnum }}节课</label>
                </p>
              </li>
            </ul>
            <div class="" v-else>
              <el-empty description="暂无课程  快去报名吧"></el-empty>
            </div>
          </div>

          <div class="clear"></div>
          <div class="train-con-list">
            <div class="t-tit" @click="openDetail()" v-if="my_lesson.length != 0">
              <h3>我的课程</h3>
              <span class=" arrow-rr" style="cursor: pointer;">更多</span>
            </div>
            <ul class=" my-c-list" v-if="my_lesson.length != 0">
              <li v-for="(item, index) in my_lesson" :key="index" @click="goDetail(item.cid,item)">
                <div class="pic_area"><img classs="pic" :src="item.image" /></div>
                <label class="jk" style="background-color: rgba(0,0,0,0.16);">{{ item.contentnum }}节课</label>
                <p>
                  <span class="tit more">
                    <label class="name">{{ item.name }}</label>
                    <!--  <label class="fr price" v-if="item.payuswitch == 2">￥{{ item.price }}</label>
                    <label class="fr price" v-else>￥免费</label> -->
                  </span>
                </p>
                <p>
                  {{ item.validity }}
                  <span v-if="item.validity_status == 1">到期</span>
                </p>
                <p>
                  <label class="  mr20 ">{{ item.studynum }}次学习</label>
                  <label class=" fr baom" v-if="item.paystatus == 0">报名</label>
                  <label class=" fr baom cur" v-else>已报名</label>
                </p>
              </li>
            </ul>

            <div class="clear"></div>
            <div class="t-tit" :class="{'mt50':my_lesson.length}" @click="goCourse()" v-if="all_lesson.length > 0 && isLookAll == true">
              <h3>全部课程</h3>
              <span class=" arrow-rr" style="cursor: pointer;">更多</span>
            </div>
            <ul class="  my-c-list" v-if="all_lesson.length > 0 && isLookAll == true">
              <li v-for="(item, index) in all_lesson" :key="index" @click="goDetail(item.id)">
                <div class="pic_area"><img classs="pic" :src="item.image" /></div>
                <label class="jk" style="background-color: rgba(0,0,0,0.16);">{{ item.contentnum }}节课</label>
                <p>
                  <span class="tit more">
                    <label class="name">{{ item.name }}</label>
                    <label class="fr price" v-if="item.payuswitch == 2">￥{{ item.price }}</label>
                    <label class="fr price" v-else>￥免费</label>
                  </span>
                </p>
                <p>
                  {{ item.validity }}
                  <span v-if="item.validity_status == 1">到期</span>
                </p>
                <p>
                  <label class="  mr20 ">{{ item.studynum }}次学习</label>
                  <label class=" fr baom" v-if="item.paystatus == 0" @click="goName(item.id)">报名</label>
                  <label class=" fr baom cur" v-else>已报名</label>
                </p>
              </li>
            </ul>

            <div class="clear"></div>
            <div class="t-tit mt50" @click="goCourseJp()" v-if="only_lesson.length > 0 &&isLookOnly==true">
              <h3>精品课程</h3>
              <span class=" arrow-rr" style="cursor: pointer;">更多</span>
            </div>
            <ul class="  my-c-list" v-if="only_lesson.length > 0 &&isLookOnly==true">
              <li v-for="(item, index) in only_lesson" :key="index" @click="goName(item.id)">
                <div class="pic_area"><img classs="pic" :src="item.image" /></div>
                <label class="jk" style="background-color: rgba(0,0,0,0.16);">{{ item.contentnum }}节课</label>
                <p>
                  <span class="tit more">
                    <label class="name">{{ item.name }}</label>
                    <label class="fr price" v-if="item.payuswitch == 2">￥{{ item.price }}</label>
                    <label class="fr price" v-else>￥免费</label>
                  </span>
                </p>
                <p>
                  {{ item.validity }}
                  <span v-if="item.validity_status == 1">到期</span>
                </p>
                <p>
                  <label class="  mr20 ">{{ item.studynum }}次学习</label>
                  <label class=" fr baom" v-if="item.paystatus == 0" @click="goName(item.id)">报名</label>
                  <label class=" fr baom cur" v-else>已报名</label>
                </p>
              </li>
            </ul>

            <div class="clear"></div>

            <!-- <Copyright /> -->
          </div>
        </div>
      </div>
    </div>

    <div class="r-xcx"><span class="sp">微信小程序</span>
      <div class="r-xcx2">
        <h3>培训平台小程序</h3>
        <img width="169" style="margin-top: 26px;" src="/static/img/qr.png" />
      </div>
    </div>

  </div>
</template>

<script>
import Header from '../../components/header_train.vue';
import Copyright from '../../components/copyright2.vue';
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      isView: false,
      isOpen: true, //是否展开
      value: [],
      token: '',
      all_lesson: [], //全部课程
      only_lesson: [], //精品课程
      my_lesson: [], //我的课程
      banner: '',
      speed_lesson: [], //学习进度
      userInfo: JSON.parse(localStorage.getItem('userInfo')),
      token: localStorage.getItem('token'),
      isLookAll: false,
      isLookOnly: false
    };
  },
  // computed:{
  //   //配合...
  //   ...mapState({
  //     count1:state=>state.count1
  //   }),
  //   //
  //   ...mapGetters([
  //     'getUserInfo'
  //   ])
  // },
  created() {
    this.token = localStorage.getItem('token');
    this.getBanner();
    this.getAll();
    this.getIsLook();
  },

  methods: {
    goOpen(value) {
      window.open(value);
    },

    getBanner() {
      this.$api('getCourseList.banner', { token: this.token, type: 'pc' }).then(res => {
        //console.log(res.data.data);
        this.banner = res.data.data;
      });
    },
    //获取页面信息
    getAll() {
      let formData = {
        token: this.token,
        page: 1,
        limit: 10,
        status: ''
      };
      this.$api('getCourseList.getUserList', formData).then(res => {
        this.my_lesson = res.data.data;
      });
      this.$api('getCourseList.index', formData).then(res => {
        this.all_lesson = res.data.data;
      });
      let only_form = {
        token: this.token,
        page: 1,
        limit: 10,
        boutiquestatus: 1
      };
      this.$api('getCourseList.index', only_form).then(res => {
        this.only_lesson = res.data.data;
      });

      let speed_form = {
        token: this.token,
        p: 1,
        limit: 10
      };
      this.$api('getCourseList.study_speed', speed_form).then(res => {
        this.speed_lesson = res.data.data;
      });
    },
    //获取课程是否可见权限
    getIsLook() {
      this.$api('getCourseList.getauth', { token: this.token }).then(res => {
        if (res.data.jing == '1') {
          this.isLookOnly = true;
        }
        if (res.data.quanbu == '1') {
          this.isLookAll = true;
        }
      });
    },
    //报名
    goName(id) {
      this.$router.push('/trainDetail?id=' + id);
    },
    openStudy() {
      this.$router.push('/process');
    },
    goDetail(id,item) {
      if (item && item.status == 1) {
        this.$message.error('课程已下架！请查看其它课程！');
        return;
      }
      this.$router.push('/trainDetail?id=' + id);
    },
    openDetail() {
      this.$router.push('/courseMy');
    },
    goCourse() {
      this.$router.push('/trainList');
    },
    goCourseJp() {
      this.$router.push('/trainList2');
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
.more {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.my-c-list {
  min-height: 240px !important;
}
.gglist, .gglist li{
  cursor: pointer;
}
</style>
